<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		var cfg = {
		    Chart : {
				Animation : true,
				PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BorderColor : "#84888B",
				Type : "spline",
		    },
			Credits : {
				Enabled:false
			},
			
		    Legend : {
		    	Layout : "horizontal",			// Legend 모양 설정
				Align : "center",				// Legend 가로 정렬 설정
				VerticalAlign : "bottom"		// Legend 세로 정렬 설정
		    },
			
		    YAxis : {
		        LineColor : "#7F7F7F",
		        LineWidth : 1,
		        Title : {
		            Text : ""
		        }
		    }
		}
		
		myChart.SetOptions(cfg);
		
		// 데이터
		var data = [{
			Name : "데이터",
		
			Data : [{Y:50},
			        {Y:20},
			        {Y:80, marker: {symbol : 'url(/Mass_template/chart/img/sun.png)'}},
			        {Y:40},
			        {Y:60},
			        {Y:20, marker: {symbol : 'url(/Mass_template/chart/img/snow.png)'}},
			        {Y:60}]
		}];
		
		myChart.SetSeriesOptions(data);
		myChart.Draw();
		
	});
	
</script>
<title>선형 차트 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">심볼 이미지가 포함된 선형 차트</div>
	<div id="desc">
		JSON data 에서 marker: {symbol : 'url( )'} 형식의 데이터를 받아 마크 부분에 이미지로 표시한다.
	</div>

	<div id="functionArea">
		marker: {symbol : 'url(/Mass_template/chart/img/sun.png)'}
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "300px");
		</script>
	</div>
</div>
</body>
</html>